<div class="footer-container">
    <div class="footer">
        <div class="container">
            <div class="fl">
                <a href="<?php echo href_link(FILENAME_INDEX); ?>">
                    <h4 class="footer-h4"><strong>@2011-2023 <span class="all-in">ALL-IN-ONE PACKAGE TRACKING |
                                16TRACK</span></strong></h4>
                </a>
            </div>
            <button id="scrollBtn" class="fr df-c"><a>To the top ↑</a></button></strong>
        </div>
    </div>
</div>
<Style>
.footer-container,
.footer {
    background: white;
    margin: 0 auto;
}

.footer {
    width: 62.99%;
}

@media (max-width: 767px) {
    .footer {
        width: 89.74%;
        height: 48px;
    }
}

@media (max-width: 767px) {
    .footer-container .container {
        @media (max-width: 767px) {}

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-h4 {
    line-height: 113px !important;
    background: white;
    font-weight: 700;
    color: black;
    font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    letter-spacing: -0.015em;
    font-size: 18px !important;
    margin: 0;
    letter-spacing: -0.015em;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .footer-h4 {
        line-height: 1.5 !important;
        width: 285px;
    }
}

.all-in:hover {
    text-decoration: underline;
}

#scrollBtn {
    border: none;
    background: transparent;
    line-height: 113px;
}

#scrollBtn a {
    text-decoration: none;
    color: #6d6d6d;
    letter-spacing: -0.015em;
    font-size: 18px;
}

#scrollBtn a:hover {
    text-decoration: underline;
    color: #6d6d6d;
}

.footer-contaier {
    height: 113px
}

@media (max-width: 767px) {
    .footer-container h4 {
        color: black;
        font-size: 16px !important;
    }
}


@media (max-width: 767px) {
    #scrollBtn a {
        display: none;
    }

    #scrollBtn::before {
        content: "Up ↑";
    }
}


@media (max-width: 1040px) {
    .footer strong {
        font-size: 14px;
    }



}

@media (max-width: 1040px) {
    #scrollBtn a {
        font-size: 14px;
    }
}
</Style>


<script language="javascript" type="text/javascript">
// GetButtonElements
var scrollBtn = $('#scrollBtn');

// AddClickEventListener
scrollBtn.on('click', function() {
    // GetTheCurrentScrollingPosition
    var currentPosition = $(window).scrollTop();

    // DefineTheDurationAndIntervalOfTheAnimation
    var duration = 500;
    var interval = 15;

    // CalculateTheNumberOfRollingStepsAndTheDistancePerStep
    var scrollStep = -currentPosition / (duration / interval);

    //CreateATimerToExecuteScrollingAnimation
    var scrollInterval = setInterval(function() {
        // 更新滚动位置
        currentPosition += scrollStep;

        // CheckIfItHasReachedTheTop
        if (currentPosition <= 0) {
            clearInterval(scrollInterval); //ClearTimer
            currentPosition = 0; // EnsureTheScrollingPositionIs_0
        }

        // PerformingScrollingOperations
        $(window).scrollTop(currentPosition);
    }, interval);
});
</script>
<?php echo FOOTER_ABSOLUTE_FOOTER; ?>